<template>
  <div class="digital-flop-wrap">
    <div class="digital-flop"  v-for="(item, index) in list" :key="index">
      <div class="digital-flop-title">
        <img class="title-img" :src="require(`../../../assets/img/${item.titleImg}.png`)" alt="">
        <span class="title-name">{{item.title}}</span>
      </div>
      <div class="digital-flop-number">
        <dv-digital-flop :config="item.config" />
      </div>
      <div class="digital-flop-data">
        <span class="data-item" v-for="(sub, n) in item.list" :key="n">
          <span>{{sub.title}}</span>
          <span class="data-item-num">{{sub.num + '.00'}}</span>
          <img class="up-img" :src="require(`../../../assets/img/${sub.up ? 'up' : 'down'}.png`)" alt="">
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import getRandom from '@/assets/js/getRandom'
export default {
  name: 'DigitalFlop',
  props: {
    data: {
      type: Object,
      name: {
        type: String
      },
      color: {
        type: String
      }
    }
  },
  data () {
    return {
      list: [
        {
          titleImg: 'cunkuan',
          title: '存款总额',
          config: {
            style: {
              fontSize: 30,
              fill: '#FFD640'
            },
            number: [53, 234, 36],
            textAlign: 'left',
            content: '{nt},{nt}.{nt}万元'
          },
          list: [
            { title: '比上日', num: 2889.00, up: true },
            { title: '比上月', num: 1089.00, up: false },
            { title: '比上年', num: 4889.00, up: true }
          ]
        },
        {
          titleImg: 'daikuan',
          title: '贷款总额',
          config: {
            style: {
              fontSize: 30,
              fill: '#FFD640'
            },
            number: [32, 345, 12],
            textAlign: 'left',
            content: '{nt},{nt}.{nt}万元'
          },
          list: [
            { title: '比上日', num: 2334.34, up: true },
            { title: '比上月', num: 4578.46, up: false },
            { title: '比上年', num: 5689.69, up: true }
          ]
        },
        {
          titleImg: 'ckrijun',
          title: '存款年日均',
          config: {
            style: {
              fontSize: 30,
              fill: '#FFD640'
            },
            number: [32, 364, 69],
            textAlign: 'left',
            content: '{nt},{nt}.{nt}万元'
          },
          list: [
            { title: '比上日', num: 2489.00, up: true },
            { title: '比上月', num: 1009.46, up: false },
            { title: '比上年', num: 2468.00, up: true }
          ]
        },
        {
          titleImg: 'dkrijun',
          title: '贷款年日均',
          config: {
            style: {
              fontSize: 30,
              fill: '#FFD640'
            },
            number: [23, 456, 25],
            textAlign: 'left',
            content: '{nt},{nt}.{nt}万元'
          },
          list: [
            { title: '比上日', num: 3458.25, up: true },
            { title: '比上月', num: 3468.63, up: false },
            { title: '比上年', num: 7323.83, up: true }
          ]
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['getCount'])
  },
  watch: {
    getCount () {
      this.list = [
        {
          titleImg: 'cunkuan',
          title: '存款总额',
          config: {
            style: {
              fontSize: 30,
              fill: '#FFD640'
            },
            number: [getRandom(0, 100), getRandom(0, 1000), getRandom(0, 100)],
            textAlign: 'left',
            content: '{nt},{nt}.{nt}万元'
          },
          list: [
            { title: '比上日', num: getRandom(2000, 3000), up: true },
            { title: '比上月', num: getRandom(1000, 2000), up: false },
            { title: '比上年', num: getRandom(4000, 5000), up: true }
          ]
        },
        {
          titleImg: 'daikuan',
          title: '贷款总额',
          config: {
            style: {
              fontSize: 30,
              fill: '#FFD640'
            },
            number: [getRandom(0, 100), getRandom(0, 1000), getRandom(0, 100)],
            textAlign: 'left',
            content: '{nt},{nt}.{nt}万元'
          },
          list: [
            { title: '比上日', num: getRandom(2000, 3000), up: true },
            { title: '比上月', num: getRandom(1000, 2000), up: false },
            { title: '比上年', num: getRandom(4000, 5000), up: true }
          ]
        },
        {
          titleImg: 'ckrijun',
          title: '存款年日均',
          config: {
            style: {
              fontSize: 30,
              fill: '#FFD640'
            },
            number: [getRandom(0, 100), getRandom(0, 1000), getRandom(0, 100)],
            textAlign: 'left',
            content: '{nt},{nt}.{nt}万元'
          },
          list: [
            { title: '比上日', num: getRandom(2000, 3000), up: true },
            { title: '比上月', num: getRandom(1000, 2000), up: false },
            { title: '比上年', num: getRandom(4000, 5000), up: true }
          ]
        },
        {
          titleImg: 'dkrijun',
          title: '贷款年日均',
          config: {
            style: {
              fontSize: 30,
              fill: '#FFD640'
            },
            number: [getRandom(0, 100), getRandom(0, 1000), getRandom(0, 100)],
            textAlign: 'left',
            content: '{nt},{nt}.{nt}万元'
          },
          list: [
            { title: '比上日', num: getRandom(2000, 3000), up: true },
            { title: '比上月', num: getRandom(1000, 2000), up: false },
            { title: '比上年', num: getRandom(4000, 5000), up: true }
          ]
        }
      ]
    }
  }
}
</script>
<style lang="less">
  .digital-flop-wrap {
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    .digital-flop-data {
      display: flex;
      align-items: center;
      .up-img {
        width: 10px;
      }
      .data-item {
        margin-right: 20px;
      }
      .data-item:last-child {
        margin-right: 0;
      }
      .data-item-num {
        font-size: 14px;
        color: #40FFE6;
        padding-left: 10px;
        padding-right: 5px;
      }
    }
    .digital-flop-title {
      padding-bottom: 10px;
      display: flex;
      align-items: center;
      .title-img {
        width: 20px;
        margin-right: 5px;
      }
      .title-name {
        font-size: 18px;
        color: #ccc;
      }
    }
    .digital-flop {
      width: 50%;
      height: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 35px;
      .dv-digital-flop {
        height: 100%;
      }
    }
    .digital-flop:nth-child(3) {
      justify-content: flex-start;
    }
    .digital-flop:nth-child(4) {
      justify-content: flex-start;
    }
    .digital-flop-number {
      height: 30%;
    }
  }
</style>
